import QueryFilter from '@/components/QueryFilter';
import Toolbar from '@/components/Toolbar';
import useAntdList from '@/hooks/useAntdList';
import useAntdModal from '@/hooks/useAntdModal';
import { queryGatewayResource } from '@/service/deliver';
import { formatDate } from '@/utils/utils';
import { PlusOutlined } from '@ant-design/icons';
import { Button, Form, Table, Tabs, Tag } from 'antd';
import { ColumnsType } from 'antd/lib/table';
import React from 'react';
import SaveResource from './SaveResource';
const ResourcePanel = ()=>{
  let [form] = Form.useForm()
  const { tableProps,tabsProps, search, refresh } = useAntdList(queryGatewayResource, {
    tabsKey:'env',defaultTabsActiveKey:'dev',
    form })
  const saveResource = useAntdModal({ refresh })
  // const { data } = useRequest(querySite)
  // useEffect(()=>{
  //    if(data){

  //    }
  // },[data])
  const { dataSource } = tableProps
  // console.log('datadata',data)
  const columns: ColumnsType<any> = [{
    title: '标题',
    dataIndex: 'title',
    render(_) {
      return <Tag color='green'>{_}</Tag>
    },
    
  },{
    title: 'Data ID',
    dataIndex: 'dataId'
  }, {
    title: 'Group',
    dataIndex: 'group'
  },  {
    title: '创建时间',
    dataIndex: 'createdAt',
    render: (_) => formatDate(_)

  }, {
    title: '修改时间',
    dataIndex: 'updatedAt',
    render: (_) => formatDate(_)

  }, {
    title: '操作',
    render(_) {
      return <div>
        <Button  onClick={() => saveResource.openModal(_, { title: '编辑站点' })} type="link">编辑</Button>
      </div>
    }
  }
  ]
  return <div>
    <QueryFilter
      items={[{
        name: 'host',
        label: '域名',

      }, {
        name: 'path',
        label: '路径'
      }, {
        name: 'name',
        label: '名称'
      }]}
      form={form} submit={search.submit} reset={search.reset} >

    </QueryFilter>
    <Toolbar
      leftRender={
        <Button type='primary'  icon={<PlusOutlined />}  onClick={() => saveResource.openModal({
          env:tabsProps.activeKey
        }, { title: '新建资源' })}>新建资源</Button>
      }
    />
    <Tabs
    {...tabsProps}
    items={[{
      label:'开发环境',
      key:'dev'
    },{
      label:'测试环境',
      key:'test'
    },{
      label:'生产环境',
      key:'prod'
    }]}
    />
   
    <SaveResource {...saveResource} />
    <Table size='small'  rowKey='id' {...tableProps} columns={columns} />
  </div>
}
export default ResourcePanel